<template>
  <div class="app-container">
    <HkSearchform
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      :list-type-info="filterInfo.dictList"
      @handleSearch="handleQuery"
      @handleReset="handleReset" />

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:dict:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:dict:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:dict:remove']"
          >删除</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button icon="el-icon-close" size="mini" @click="handleClose">关闭</el-button>
      </el-col>
    </el-row>

    <HkTable
      :tableData="typeList"
      :tableColumns="qualtableLabel"
      :showIndex="true"
      :operate="true"
      :selection="true"
      @changePage="getList"
      :queryParams="queryParams"
      :total="total"
      @handleSelectionChange="handleSelectionChange">
      <template #status="scope">
        <span class="Inspan" :class="scope.row.status == 0 ? 'simple' : 'serious'">
          {{ scope.row.status == 0 ? '正常' : scope.row.status == -1 ? '删除' : '停用' }}
        </span>
      </template>
      <template #operate="scope">
        <el-button @click="handleUpdate(scope.row)" type="text">修改</el-button>
        <el-button @click="handleDelete(scope.row)" type="text">删除</el-button>
      </template>

      <template #dictType="scope">
        <el-button type="text" @click="$router.push('/system/dict-data/' + scope.row.id)">{{
          scope.row.dictType
        }}</el-button>
      </template>
    </HkTable>

    <AddDictdatas ref="add_dia" :title="title" :transForm="form" @submitForm="getList" />
  </div>
</template>

<script>
import { listData, getData, delData } from '@/api/system/dict/data'
import { getType, listAll } from '@/api/system/dict/type'
import HkTable from '@/components/HKTable/index.vue'

import AddDictdatas from './coms/addDictdatas.vue'
import HkSearchform from '@/components/HKSearchform/index.vue'

export default {
  name: 'Data',
  dicts: ['dict_status'],
  components: { HkTable, AddDictdatas, HkSearchform },
  data() {
    return {
      // 搜索项配置
      filterInfo: {
        fieldList: [
          {
            label: '字典名称',
            type: 'select',
            field: 'dictName',
            list: 'typeList',
          },
          { label: '字典类型', type: 'input', field: 'dictType' },
          {
            label: '状态',
            type: 'select',
            field: 'status',
            list: 'statusList',
          },
          {
            label: '创建时间',
            type: 'dateRange',
            field: 'timetBox',
          },
        ],
        // 列表准则
        dictList: {
          typeList: [],
          statusList: [
            { label: '正常', value: 0 },
            { label: '停用', value: 1 },
          ],
        },
      },
      // 查询的数据
      qualtableLabel: [
        { label: '字典类型', param: 'dictType' },
        { label: '字典标签', param: 'dictLabel' },
        { label: '字典键值', param: 'dictVal' },
        { label: '字典排序', param: 'dictSort' },
        { label: '状态', param: 'status', type: 'slot' },
        { label: '备注', param: 'remark' },
        { label: '创建时间', param: 'createDate' },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      // 默认字典类型
      defaultDictType: '',
      defaultDictName: '',
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 数据标签回显样式

      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
      },
      typeList: [],
      // 表单参数
      form: {},
      //  选中的字典类型
      dictType: [],
    }
  },
  created() {
    let dictId = this.$route.query && this.$route.query.dictId

    this.getList()
    this.getType(dictId)
    this.getTypeList()
  },
  methods: {
    /** 查询字典类型详细 */
    getType(dictId) {
      getType(dictId).then((response) => {
        this.queryParams.dictType = response.dictType
        this.defaultDictType = response.dictType
        this.defaultDictName = response.dictName
        this.queryParams.dictName = response.dictName
        this.getList()
      })
    },
    /** 查询字典类型列表 */
    getTypeList() {
      listAll().then((response) => {
        response.forEach((item) => {
          this.filterInfo.dictList.typeList.push({
            value: item.dictName,
          })
        })
      })
    },
    /** 查询字典数据列表 */
    getList(val) {
      this.loading = true
      this.queryParams = { ...this.queryParams, ...val }

      listData(this.queryParams).then((response) => {
        this.typeList = response.list
        this.total = response.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery(data) {
      if (data) {
        if (data.timetBox) {
          data.endTime = data.timetBox[1]
          data.startTime = data.timetBox[0]
        } else {
          data.timetBox = undefined
        }

        this.queryParams = data
        this.queryParams.current = 1
        this.getList()
      }
    },
    /** 返回按钮操作 */
    handleClose() {
      const obj = { path: '/system/dict' }
      this.$tab.closeOpenPage(obj)
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        current: 1,
        dictName: this.defaultDictName,
        dictType: this.defaultDictType,
        size: 10,
        status: undefined,
        endTime: undefined,
        startTime: undefined,
      }

      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.$refs.add_dia.open = true
      this.title = '添加字典数据'

      this.form = {}
      this.form.dictType = this.queryParams.dictType
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.dictType = selection.map((item) => item.dictType)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const dictCode = row.id || this.ids
      getData(dictCode).then((response) => {
        this.form = response
        this.$refs.add_dia.open = true
        this.title = '修改字典数据'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateData(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addData(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dictCodes = row.id || this.ids
      const dictType = row.dictType || this.dictType
      this.$modal
        .confirm('是否确认删除字典类型为"' + dictType + '"的数据项？')
        .then(function () {
          return delData(dictCodes)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'system/dict/data/export',
        {
          ...this.queryParams,
        },
        `data_${new Date().getTime()}.xlsx`
      )
    },
    // 表单重置
    reset() {
      this.form = {
        dictCode: undefined,
        dictLabel: undefined,
        dictValue: undefined,
        cssClass: undefined,
        listClass: 'default',
        dictSort: 0,
        status: '0',
        remark: undefined,
      }
      this.resetForm('form')
    },
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
  .targetTable {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
}

</style>